<!--
 * @Author: Islands 1430536748@qq.com
 * @Date: 2024-07-21 23:31:49
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-07-23 21:34:21
 * @version: 1.2.2
 * @Description: 密码模式表单
-->
<script setup lang="ts">
import { $t } from '@/plugins/index';
import { User, Lock } from "@element-plus/icons-vue";
import { AES_Decrypt, AES_Encrypt } from '@/utils/encrypt';
import type { FormInstance, FormRules } from "element-plus";
import type { IPwdLogin } from '@/types/login/index'
//记住密码 储存 KEY
let REMEMBER = "REMEMBER";
const Constant = computed(() => {
    return {
        username: $t(`login.placeholder.username`),
        password: $t(`login.placeholder.password`),
        rememberMe: $t(`login.button.rememberMe`),
        forgetPassword: $t(`login.button.forgetPassword`),
        submit: $t(`login.button.submit`)
    }
});
const loginForm = reactive<IPwdLogin>({
    username: '',
    password: '',
    rememberMe: false,
});
const ruleFormRef = ref<FormInstance>();
const rulesForm = computed<FormRules>(() => {
    return {
        username: [
            { required: true, message: $t(`login.placeholder.username`, { prefix: $t(`common.placeholder.enter`) }), trigger: "click" }
        ],
        password: [
            { required: true, message: $t(`login.placeholder.password`, { prefix: $t(`common.placeholder.enter`) }), trigger: "click" },
        ],
    }
});
/** 初始化记住密码 */
const rememberMeInit = () => {
    let item = localStorage.getItem(REMEMBER);
    if (item) {
        let decrypt = AES_Decrypt(item);
        if (decrypt) {
            loginForm.username = decrypt.split(":")[0];
            loginForm.password = decrypt.split(":")[1];
            loginForm.rememberMe = true;
        }
    }
}
/** 提交登陆 */
const SubmitEvent = async (formEl: FormInstance | undefined, loginForm: IPwdLogin) => {
    if (!formEl) return;
    if (await formEl.validate()) {
        if (loginForm.rememberMe) {
            let str = loginForm.username + ":" + loginForm.password;
            localStorage.setItem(REMEMBER, AES_Encrypt(str));
        } else {
            localStorage.remove(REMEMBER);
        }
        //todo 密码登陆
    }
}
/** 忘记密码 */
const forgetEvent = () => {
    //todo 忘记密码
    alert("开发中....")
}

onMounted(() => {
    rememberMeInit();
});

/** 重置表单 */
const resetForm = () => {
    ruleFormRef.value?.resetFields();
    ruleFormRef.value?.validateField();
}
defineExpose({
    resetForm
})
</script>
<template>
    <el-form ref="ruleFormRef" :model="loginForm" :rules="rulesForm" size="large">
        <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username" :placeholder="Constant.username" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input :prefix-icon="Lock" show-password type="password" v-model="loginForm.password"
                :placeholder="Constant.password" />
        </el-form-item>
        <el-form-item>
            <div class="flex flex-justify-between" style="width: 100%">
                <el-checkbox v-model="loginForm.rememberMe">{{
                    Constant.rememberMe
                }}</el-checkbox>
                <el-button disabled text @click="forgetEvent">{{ Constant.forgetPassword }} </el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button style="width: 100%" type="primary" auto-insert-space dark round
                @click="SubmitEvent(ruleFormRef, loginForm)">{{ Constant.submit
                }}</el-button>
        </el-form-item>
    </el-form>
</template>
<style scoped lang="scss">
:deep(.el-icon) {
    svg {
        width: 20px;
        height: 20px;
    }
}
</style>